<template>
  <view class="recommend flex flex-between">
    <view class="service recommend-item">
      <view class="green-view"></view>
      <view class="orange-view"></view>
      <view class="item-container">
        <view class="title flex flex-middle flex-between" @click="toMore(1)">
          <view class="flex flex-middle">
            <image src="@/static/image/home/service.png" mode="widthFix" />
            热门服务
          </view>
          <u-icon
            bold
            class="right-icon flex flex-middle flex-right"
            name="arrow-right"
            size="8"
            color="#333333"
          />
        </view>
        <swiper
          class="service-swiper"
          circular
          autoplay
          indicator-dots
          indicator-color="#eee"
          indicator-active-color="#ccc"
        >
          <swiper-item
            v-for="(item, index) in [1, 1, 1, 1, 1]"
            :key="index"
            @click="toService(item)"
          >
            <view class="service-item">
              <image src="@/static/image/common/test.png" mode="aspectFill" />
              <view class="service-title text-line"> 中式推拿·SPA套餐A </view>
              <view class="service-tag text-line"> 腰腿酸软，上门按摩 </view>
              <view class="service-price flex flex-between flex-middle">
                <view class="price flex flex-bottom">
                  <text>￥</text>
                  288.9
                </view>
                <view class="tips"> 已售1.4w+ </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="craftsman recommend-item flex-1">
      <view class="green-view"></view>
      <view class="orange-view"></view>
      <view class="item-container">
        <view class="title flex flex-middle flex-between" @click="toMore(0)">
          <view class="flex flex-middle">
            <image src="@/static/image/home/craftsman.png" mode="widthFix" />
            高分匠人
          </view>
          <u-icon
            bold
            class="right-icon flex flex-middle flex-right"
            name="arrow-right"
            size="8"
            color="#333333"
          />
        </view>
        <u-scroll-list
          class="craftsman-view"
          indicatorActiveColor="#ccc"
          :indicatorStyle="{ marginTop: '6px' }"
        >
          <view
            class="craftsman-item text-center"
            v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]"
            :key="index"
            @click="toCraftsman(item)"
          >
            <image src="@/static/image/common/test.png" mode="aspectFill" />
            <view class="craftsman-name text-line"> 李子欣 </view>
            <view class="craftsman-score"> 综合评分 8.8 </view>
            <view class="craftsman-title"> 金牌月嫂 </view>
            <view class="craftsman-sales"> 已售1.4w+ </view>
          </view>
        </u-scroll-list>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    scrollToList: {
      type: Function,
      default: () => {},
    },
    changeTab: {
      type: Function,
      default: () => {},
    },
  },
  methods: {
    toMore(type) {
      this.changeTab(type);
      this.scrollToList();
    },
    toCraftsman(item) {
      this.$navigateTo(`/pages/craftsman/detail?id=${item}`);
    },
    toService(item) {
      this.$navigateTo(`/pages/service/detail?id=${item}`);
    },
  },
};
</script>

<style scoped lang="scss">
.recommend {
  margin-top: 16px;
}

.craftsman-item {
  margin-right: 8px;
  width: 85px;

  .craftsman-sales {
    font-size: 10px;
    color: #979797;
  }

  .craftsman-title {
    font-size: 10px;
    color: #ca923f;
    font-weight: bold;
    margin: 4px 0;
  }

  .craftsman-score {
    font-size: 10px;
    color: #979797;
  }

  .craftsman-name {
    color: #333;
    margin-top: 3px;
  }

  image {
    border-radius: 50%;
    height: 85px;
    width: 85px;
  }
}

.craftsman-view {
  margin-top: 10px;
}

.service-item {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  padding-bottom: 2px;

  .service-price {
    padding: 0 6px;
    margin-top: 2px;

    .price {
      color: #fa6400;
      font-size: 12px;
      font-weight: bold;

      text {
        font-size: 10px;
      }
    }

    .tips {
      font-size: 10px;
      color: #979797;
    }
  }

  .service-tag {
    display: inline-block;
    color: #979797;
    font-size: 10px;
    margin: 2px 6px 0;
    padding: 0 6px;
    background: #f6f6f6;
    border-radius: 10px;
    max-width: 106px;
  }

  .service-title {
    padding: 4px 8px 0;
    color: #222;
  }

  image {
    width: 100%;
    height: 86px;
  }
}

.service-swiper {
  margin-top: 10px;
  height: 183px;
}

.item-container {
  position: relative;
  padding: 8px 8px 0;

  .title {
    color: #333;
    font-size: 16px;
    padding-top: 8px;
    padding-left: 6px;

    .right-icon {
      border-radius: 50%;
      width: 11px;
      height: 12px;
      border: 1px solid #333;
      padding-right: 1px;
    }

    image {
      width: 20px;
      margin-right: 4px;
    }
  }
}

.recommend-item {
  background: linear-gradient(0deg, #f6fbff 0%, #f3fff6 100%);
  border-radius: 8px;
  position: relative;
  overflow: hidden;

  .orange-view {
    position: absolute;
    top: 0;
    left: 18%;
    width: 22%;
    height: 24px;
    background: rgba(255, 236, 113, 0.87);
    opacity: 0.52;
    filter: blur(10px);
  }

  .green-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 28%;
    height: 66px;
    background: rgba(132, 252, 84, 0.35);
    opacity: 0.52;
    filter: blur(10px);
  }
}

.service {
  width: 144px;
  height: 230px;
  margin-right: 10px;
}

.craftsman {
  height: 230px;
}
</style>